<template>
  <div>
    <!--表格对象-->
    <Table
      :table="table"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_ROLE_MANAGE"
      :showTableIndex="false"
      @addRow="addRow"
      @selectionChange="handleSelectionChange"
      @editRow="editRow"
    >
      <template #toorbar_left_right>
        <el-button :disabled="!multipleSelection.length" icon="circle-close" type="warning" style="margin:0 5px 0 0;" @click="updateRoleEnabled(false)">停用角色</el-button>
        <el-button :disabled="!multipleSelection.length" icon="circle-close" type="success" style="margin:0 5px 0 0;" @click="updateRoleEnabled(true)">启用角色</el-button>
      </template>
      <!--默认角色-->
      <template #defaultRole="scope">
        <el-tag :type="`${scope.row.defaultRole==true ? 'success' : 'info'}`">{{dictToMap(yesOrNoDict).get(scope.row.defaultRole)}}</el-tag>
      </template>
      <!--启用状态-->
      <template #enabled="scope">
        <el-switch
          v-model="scope.row.enabled"
          :loading="scope.row.loading"
          @change="enabledChange($event,scope.row)"
          inline-prompt
          active-icon="Check"
          inactive-icon="Close"/>
      </template>
      <template #table_operator_right="scope">
        <el-button  type="primary"  size="small" icon="edit" plain @click="permissionManage(scope.row)">分配菜单</el-button>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';
import {
  defineProps, getCurrentInstance, ref,
} from 'vue';
// 导入element插件对象
import { ElMessage } from 'element-plus';
// 导入字典
import { yesOrNoDict } from '@/api/dict';
// 导入项目接口
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { Role } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();

// 接收父组件传递过来的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList:()=>void, // 重新加载表格
  changePageSize:()=>void, // 当每页数据显示数发生变化时触发的一个函数
  changePage:()=>void, // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();
// 将刷新表格组件往子组件传递
// provide('loadTableList', props.loadTableList);

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '角色名称',
    prop: 'nameZh',
    fixed: true,
  },
  {
    label: '角色标识',
    prop: 'name',
    width: 150,
  },
  {
    label: '默认角色',
    prop: 'defaultRole',
    width: 100,
    type: 'dict',
    dict: yesOrNoDict,
  },
  {
    label: '级别',
    prop: 'level',
    width: 60,
  },
  {
    label: '启用状态',
    prop: 'enabled',
    width: 100,
    type: 'custom',
  },
  {
    label: '使用账户',
    prop: 'userNumber',
    width: 100,
  },
  {
    label: '权限数量',
    prop: 'permissionumber',
    width: 100,
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180,
  },
]);

// 更改角色的可用状态
const enabledChange = async (newVal:boolean, row:Role) => {
  const ids = [row.id]; // 定义批量操作的角色主键
  const updateForm = {
    ids,
    enabled: newVal,
  };
  row.loading = true;// 加载中
  const resData = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_ROLE_STOP_ENABLED, JSON.stringify(updateForm)).patch();
  row.loading = false;// 加载结束
  if (resData.success) { // 如果操作成功
    let message = `已停用${row.nameZh}`;
    if (newVal) {
      message = `已启用${row.nameZh}`;
    }
    ElMessage.success(message);
  } else { // 如果失败
    row.enabled = !newVal;// 恢复原来的值
  }
};
// 当表格复选框改变
const multipleSelection = ref<Role[]>([]); // 复选框选择的记录row
const handleSelectionChange = (selection:[]) => { // 当选择项发生变化时会触发该事件，这里用于获取选择的记录（多选）.value可以获取所有选择了的行记录row
  multipleSelection.value = selection;
};

// 点击添加按钮，交由父组件处理
const addRow = () => {
  proxy.$emit('addRow', true);
};

// 编辑按钮操作
const editRow = (row:Role):void => {
  proxy.$emit('editRow', row);
};

// 点击停用角色按钮
const updateRoleEnabled = async (enabled:boolean) => {
  if (multipleSelection.value.length > 0) {
    const ids:string[] = []; // 定义批量操作的角色主键
    for (let i = 0; i < multipleSelection.value.length; i += 1) {
      const item:Role = multipleSelection.value[i];
      ids.push(item.id.toString());
    }
    const updateForm = {
      ids,
      enabled,
    };
    const resData = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_ROLE_STOP_ENABLED, JSON.stringify(updateForm)).patch();
    if (resData.success) {
      ElMessage.success('操作成功');
      props.loadTableList(); // 刷新表格
    }
  } else {
    ElMessage.error('请至少选择一条数据');
  }
};
// 权限管理
const permissionManage = (rowId:number) => {
  proxy.$emit('permissionManage', rowId);
};
</script>
<style lang="scss" scoped>

</style>
